<template>
	<view class="mine-container" :style="{height: `${windowHeight}px`}">
		<!--顶部个人信息栏-->
		<view class="header-section">
			<view id="avatarImg" class="cu-avatar">
				<view class="avatar-img">
					<u--image shape="circle" :showLoading="true" :src="avatar" width="80px" height="80px"
						@click="handleToAvatar" mode="widthFix"></u--image>
				</view>
				<view v-if="name" class="user-info">
					<u--text :text="'用户名：' + name" size="30rpx" color="#ffffff"></u--text>
					<view class="u_title">
						<u--text :text="'邀请码：' + invitedCode" size="30rpx" decoration="underline" color="#0000ff"
							@click="clickInvitedHandler"></u--text>
					</view>
					<view v-if="!name" @click="handleToLogin" class="login-tip">
						点击登录
					</view>
				</view>
			</view>
		</view>

		<view class="content-section">
			<view class="gridContent1">
				<u-grid >
					<u-grid-item class="grid-item">
						<u-icon name="chat" size="50" color="#000000"></u-icon>
						<u--text text="交流群wx" size="30rpx" align="center"></u--text>
						<u--text :text="qunNo" size="30rpx" align="center" decoration="underline" @click="clickQunHandler"></u--text>
					</u-grid-item>
				
					<u-grid-item class="grid-item">
						<u-icon name="map" size="50"  color="#000000"></u-icon>
						<u--text text="定位次数" size="30rpx"  align="center"></u--text>
						<u--text :text="this.queryLocationNum" size="30rpx"  align="center"></u--text>
					</u-grid-item>
				
					<u-grid-item class="grid-item">
						<u-icon name="search" size="50"  color="#000000"></u-icon>
						<u--text text="查询次数" size="30rpx"  align="center"></u--text>
						<u--text :text="this.queryDataNum" size="30rpx"  align="center"></u--text>
					</u-grid-item>
				</u-grid> 
			</view>
			
			
			<view class="menu-list">
				<view class="list-cell list-cell-arrow" @click="handleToLogin">
					<view class="menu-item-box">
						<view class="iconfont icon-user menu-icon"></view>
						<view>登录</view>
					</view>
				</view>
				<view class="list-cell list-cell-arrow" @click="handleHowAddQuery">
					<view class="menu-item-box">
						<view class="iconfont icon-user menu-icon"></view>
						<view>获取邀请码</view>
					</view>
				</view>
				<view class="list-cell list-cell-arrow" @click="handleToEditInfo">
					<view class="menu-item-box">
						<view class="iconfont icon-user menu-icon"></view>
						<view>编辑资料</view>
					</view>
				</view>
				<!--        <view class="list-cell list-cell-arrow" @click="handleHelp">
          <view class="menu-item-box">
            <view class="iconfont icon-help menu-icon"></view>
            <view>常见问题</view>
          </view>
        </view> -->
				<view class="list-cell list-cell-arrow" @click="handleAbout">
					<view class="menu-item-box">
						<view class="iconfont icon-aixin menu-icon"></view>
						<view>关于我们</view>
					</view>
				</view>
				<view class="list-cell list-cell-arrow" @click="handleToSetting">
					<view class="menu-item-box">
						<view class="iconfont icon-setting menu-icon"></view>
						<view>应用设置</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import constant from '@/utils/constant'
	import {
		getUserProfile,
		getInvitation
	} from '@/api/system/user.js'

	import {
		queryUserService
	} from '@/api/user/user.js'
	import user from '../../store/modules/user'
	export default {
		data() {
			return {
				qunNo: 'hfdmd001',
				user: {
					userId: "",
					phonenumber: "",
					email: "",
					sex: ""
				},
				userAo: {
					userId: ""
				},
				queryDataNum: "0",
				queryLocationNum: "0",
				name: this.$store.state.user.name,
				invitedCode: this.$store.state.user.invitedCode == null ? "请获取" : this.$store.state.user.invitedCode,
				version: getApp().globalData.config.appInfo.version
			}
		},
		computed: {
			avatar() {
				return this.$store.state.user.avatar
			},
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			}
		},
		onLoad() {
			this.getUser()
		},
		methods: {
			clickQunHandler(){
				uni.setClipboardData({
					data: this.qunNo,
					success: function() {
						// 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});
					}
				});
			},
			clickInvitedHandler() {
				uni.setClipboardData({
					data: this.invitedCode,
					success: function() {
						// 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});
					}
				});
			},
			getUser() {
				getUserProfile().then(response => {
					this.user = response.data
					this.roleGroup = response.roleGroup
					this.postGroup = response.postGroup
					this.userAo.userId = this.user.userId
					queryUserService(this.userAo).then(response => {
						this.queryDataNum = response.data.queryDataNum
						this.queryLocationNum = response.data.queryLocationNum
					})
				})
			},
			handleToInfo() {
				this.$tab.navigateTo('/pages/mine/info/index')
			},
			handleToEditInfo() {
				this.$tab.navigateTo('/pages/mine/info/edit')
			},
			handleToSetting() {
				this.$tab.navigateTo('/pages/mine/setting/index')
			},
			handleToLogin() {
				this.$tab.reLaunch('/pages/login')
			},
			handleToAvatar() {
				this.$tab.navigateTo('/pages/mine/avatar/index')
			},
			handleLogout() {
				this.$modal.confirm('确定注销并退出系统吗？').then(() => {
					this.$store.dispatch('LogOut').then(() => {
						this.$tab.reLaunch('/pages/index')
					})
				})
			},
			handleHelp() {
				this.$tab.navigateTo('/pages/mine/help/index')
			},
			handleAbout() {
				this.$tab.navigateTo('/pages/mine/about/index')
			},
			handleJiaoLiuQun() {},
			handleHowAddQuery() {
				let u = {
					username: storage.get(constant.name)
				}
				getInvitation(u).then((res) => {
					if (res.code != 200) {
						this.$modal.showToast({
							icon: 'none',
							title: res.msg,
							duration: 2000 // 持续时间，单位毫秒
						})
					}

					this.invitedCode = res.data.invitationCode
				})
			},
			handleSearch() {
				this.getUser()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #dbdbdc;
	}

	.mine-container {
		width: 100%;
		height: 100%;


		.header-section {
			padding: 10rpx 0rpx 0rpx 30rpx;
			height: 300rpx;
			width: 100%;
			background-color: #3c96f3;
			color: white;

			.cu-avatar {
				display: flex;

				.avatar-img {
					margin-left: 50rpx;
				}

				.user-info {
					margin-top: 40rpx;
					margin-left: 40rpx;

					.u_title {
						font-size: 18px;
						line-height: 30px;
					}
				}
			}


		}

		.content-section {
			position: relative;
			top: -100rpx;
			text-align: center;
			.gridContent1 {
				display: inline-block;
				border-radius: 40rpx;
				width: 80%;
				height: 200rpx;
				background-color: #f5f6f7;
			}
			.grid-item{
				display: flex;
				margin-top: 30rpx;
			}

			.mine-actions {
				margin: 15px 15px;
				padding: 20px 0px;
				border-radius: 8px;
				background-color: white;

				.action-item {

					border: 2px solid #3c96f3;

					.icon {
						font-size: 28px;
					}

					.text {
						display: block;
						font-size: 13px;
						margin: 8px 0px;
					}
				}
			}
		}
	}
</style>